<template>
    <div class="user-wrap" @click="onClick">
        <div class="cover">
            <cover-image                             
                :src="pic"
                size="@120w_120h_1c"
                class="cover-img"
                round
            >
            </cover-image>
        </div>
        <div class="content">
            <div v-if="showType" class="type"><i class="fa fa-up-zhu"></i> Up主</div>
            <div class="title">{{name}}</div>
            <div class="info">
                <span class="fans">粉丝：{{fans}}</span>
                <span class="videos">视频：{{videos}}</span>
            </div>
            <div class="info">{{sign}}</div>
        </div>
    </div>
</template>

<script>
import { useRouter } from 'vue-router'
import CoverImage from '@/components/CoverImage'
export default {
    name: 'UserCard',
    components: {
        CoverImage
    },
    props: {
        id: {
            type: Number
        },
        name: {
            type: String
        },
        pic: {
            type: String
        },
        sign: {
            type: String
        },
        fans: {
            type: [Number, String]
        },
        videos: {
            type: [Number, String]
        },
        showType: {
            type: Boolean,
            default: false
        }
    },
    setup(props) {
        const router = useRouter()
        const onClick = () => {
            router.push({
                name: 'space',
                params: {
                    mid: props.id
                }
            })
        }
        return {
            onClick
        }
    }
}
</script>

<style lang="scss" scoped>
    .user-wrap {
        display: flex;
        padding: 10px;
        .cover {
            width: 78px;
            height: 104px;
            &-img {
                padding-bottom: 100%;
            }
        }    
        .content {
            width: 260px;
            display: flex;
            flex-direction: column;
            margin-left: 10px;
            font-size: 14px;
            color: $color-text-primary;
            .fa{
                margin-right: 5px;
                font-size: 14px;
            }
            .info {
                margin-top: 5px;
                @include max-lines(1);
                color: $color-text-secondary;
            }
            .fans {
                margin-right: 10px;
            }
        }
        .title {        
            @include max-lines(2);
        }
    }
</style>